/**
 * @author xp
 * @desc 切换主题组件
 * @date 2020-02-11 18:21:30
 */

import { useState } from 'react';
import { Button, Menu, Dropdown } from 'antd';

import { SkinOutlined } from '@ant-design/icons';

import './index.less';
import { getTheme, setTheme, THEME_CONFIG, ThemeConfigItem } from './util';

const SwitchTheme = () => {
  const [themeKey, setThemeKey] = useState(getTheme());

  const handleClick = (value: string) => {
    setTheme(value);
    setThemeKey(value);
    // changeTheme();

    window.location.reload();
  };

  return (
    <Dropdown
      className="theme-dropdown"
      overlay={
        <Menu className="theme-menu">
          {THEME_CONFIG.map((item: ThemeConfigItem) => {
            const { key, backgroundColor, name } = item;
            return (
              <Menu.Item
                className={themeKey === key ? 'theme-menu-item active' : 'theme-menu-item'}
                key={key}
                onClick={() => {
                  handleClick(key);
                }}
              >
                <span className="color" style={{ backgroundColor }} />
                <span className="name">{name}</span>
              </Menu.Item>
            );
          })}
        </Menu>
      }
      placement="bottomCenter"
    >
      <Button type="link">
        <SkinOutlined />
      </Button>
    </Dropdown>
  );
};

export default SwitchTheme;
